<script lang="ts" setup>
import {reactive,ref} from "vue";
import {Lock, User} from "@element-plus/icons-vue";
import {login} from '../api/login'
import {ElMessage} from "element-plus";
const form = reactive({
    username: 'admin', password: '123456'
})

const loading = ref(false)

import {useRouter} from "vue-router"
const router = useRouter()

const submit = ()=>{
    loading.value = true
    let res = login('/employee/login',form)
    res.then(res => {
        let result: any = res
        if (result.code === 0) {
            loading.value = false
            ElMessage.error(result.msg)
        } else {
            //ElMessage.success(result.msg)
            //成功后，保存令牌 cookie
            localStorage.setItem('token', result.token)
            //成功后，促成登录管理员信息

            localStorage.setItem('username', result.username)
            localStorage.setItem('id', result.id)
            localStorage.setItem('name', result.name)

            //直接进入home首页
            //router.push({path:'/home'})

            //消息关闭后，进入首页
            let _msg = ElMessage({
                message: `${result.msg}！即将跳转到系统首页！`,//提示的信息
                type: 'success',　　//类型是成功
                offset: 50,　　//距离窗口顶部的偏移量，建议不设置
                duration: 800,　　//显示时间, 毫秒。设为 0 则不会自动关闭，建议1200
                onClose: () => {
                    //跳转页面或执行方法
                    router.push({path: '/home'})
                }
            })
            //3秒后强制关闭
            setTimeout(function () {
                loading.value = false
                _msg.close();
            }, 3000)
        }
    }).catch(e => {
        loading.value = false
        ElMessage.error('网络错误，请检查后端接口.')
    })
}

</script>
<template>
    <div class="login">
        <div class="login-box">
            <img src="../assets/imgs/login-l.png" alt="">
            <div class="login-form">
                <el-form :model="form">
                    <el-form-item><img src="../assets/imgs/logo.png" alt=""></el-form-item>
                    <el-form-item>
                        <el-input :prefix-icon="User" placeholder="请输入账号" v-model="form.username"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input :prefix-icon="Lock" placeholder="请输入密码" show-password type="password" v-model="form.password"/>
                    </el-form-item>
                    <el-button type="primary" :loading="loading" style="width:100%" @click="submit">登录</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
}

.login-box {
    width: 1000px;
    height: 474px;
    border-radius: 8px;
    display: flex;
}

.login-box img {
    width: 80%;
    height: auto;
}

.login-form {
    background: #ffffff;
    width: 40%;
    border-radius: 0 8px 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
